<template :style="dataTable">
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">

			<el-form :inline="true" :model="filters">
				<el-form-item v-if="loginID == 1"  label="人员名称">
					<el-select v-model="params.id" filterable placeholder="请选择"><i class="xing">*</i>
						<el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="项目时间">
					<el-date-picker v-model="params.time" type="month" placeholder="选择时间"></el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="serBtn()">查询</el-button>
				</el-form-item>
				<el-form-item label="总工时" style="">
					<em style="border:  #d0e1fd 1px solid; padding:6px 20px; height: 34px;color: #666; font-size: 18px; margin-left: 10px;">{{dataSum}} <i style="font-style: normal; font-size: 12px;color: #92a0b7;">时</i></em>
				</el-form-item>
			</el-form>
		</el-col>
		<el-table :height=heightData   :data="dataList"  border header-align="center"  highlight-current-row v-loading="listLoading"  style="width: 100%;">
			<el-table-column type="index" align="center" width="50">
			</el-table-column>
			<el-table-column prop="name" label="项目名称" align="center"  min-width="100">
			</el-table-column>
			<el-table-column prop="time" label="工时" align="center"  min-width="100">
			</el-table-column>
		</el-table>
	</section>
</template>

<script>
    import util from '../../common/js/util'
    import insurance from '../../api/insurance';
    import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

    export default {
        data() {
            return {
                params: {
                    id:31,
                    time:'2016-08',
                    page: 1,     //  当前页
                    pageSize: 10,    //  每页行数
                },
				loginID:0,
                dataSum:0,
                userId:0,
                userList:[],
                totalRecord:0,  //  总记录数
                filters:{'name':''},
                dataList:[],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列

                heightData: document.body.clientHeight-260,
                dataTable:document.body.clientHeight-260,
            }
        },
        methods: {
            // 查询
            serBtn(){
                this.getProList();     // 调用公共列表方法
            },
            //  每页行数 选择事件
            handleSizeChange(val) {
                this.params.pageSize = val;        // 分页参数 每页行数 （赋值全局变量）
                this.getProList();  // 调用公共列表方法
            },

            // 当前页数 点击事件
            handleCurrentChange(val) {
                this.params.page  = val;    // 分页参数 当前页数 （赋值全局变量）
                this.getProList();     // 调用公共列表方法
            },
            //获取项目列表
            getProList() {
                this.listLoading = true;
                this.dataSum = 0;
                var that = this;
                var d = new Date(that.params.time);
                $.ajax(insurance.posturl+"count/time?id="+that.params.id+"&year="+d.getFullYear()+"&month="+parseInt(d.getMonth()+1),{
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'GET',
                    success:function (res) {
                        res = JSON.parse(JSON.parse(res).Content);
                        that.totalRecord = res.count;
                        if(JSON.stringify(res.details).length > 2){
                            var arr = JSON.stringify(res.details).replace(/({|}|"|")/g, '').split(',');
                            var data = [];
                            this.dataSum = 0;
                            for(var i = 0; i<arr.length; i++){
                                var d = arr[i].split(":");
                                var ds = {'name':d[0].replace(/("|")/g, ''),'time':d[1].replace(/("|")/g, '')+' 时'};
                                that.dataSum = that.dataSum + parseInt(d[1].replace(/("|")/g, ''));
                                data.push(ds);
                            }
                            that.dataList = data;
						}else{
                            that.dataList = [];
						}
                        that.listLoading = false;
                    }
                });
            },
            // 获取用户列表
            getUser(){
                var that = this;
                $.ajax(insurance.posturl+"user/AllUsers?page=0&pageSize=200",{
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'GET',
                    success:function (res) {
                        res = JSON.parse(JSON.parse(res).Content) ;
                        var data = [];
                        for(var i = 0; i<res.list.length; i++){
                            data.push({'value':res.list[i].id,'label':res.list[i].name})
                        }
                        that.userList = data;
                        var data3 = [];
                        for(var i = 0; i<res.list.length; i++){
                            data3.push({'key':res.list[i].id,'label':res.list[i].name});
                        }
                        window.localStorage.setItem('userList2', JSON.stringify(data3));
                    }
                });
            },
        },
        mounted() {
            this.loginID = JSON.parse(sessionStorage.getItem('user')).id;
            if(JSON.parse(sessionStorage.getItem('user')).id != 99){
                this.params.id = JSON.parse(sessionStorage.getItem('user')).id;
			}
            var t = new Date;
            this.params.time = t.getFullYear() +'-'+ parseInt(t.getMonth()+1);
            this.getUser();
            this.getProList();
        }
    }
</script>

<style scoped>

</style>